<template>
  <div id="listNav">
    <ul class="list-nav" :style="{
      marginTop:styles.marginTop+'px',
       marginBottom:styles.marginBottom+'px',
        marginLeft:styles.marginLR+'px',
         marginRight:styles.marginLR+'px',}">
      <li v-for="(v,i) in styles.imgUrl" :key="i">
        <div>
          <el-image v-if="v.img==''" style="width: 20px; height: 20px" :src="img" fit="cover"></el-image>
          <el-image v-else style="width: 20px; height: 20px" :src="v.img" fit="cover"></el-image>
          <span :style="{color:styles.leftColor}">{{v.leftWord}}</span>
        </div>
        <div>
          <span :style="{color:styles.rightColor}">{{v.rightWord}}</span>
          
          <el-image v-if="styles.img==''" style="width: 20px; height: 20px" :src="img2" fit="cover"></el-image>
          <el-image v-else style="width: 20px; height: 20px" :src="styles.img" fit="cover"></el-image>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "listNav",
  data() {
    return {
      img: require("../../../assets/img/btn2.png"),
      img2: require("../../../assets/img/right.png"),
    };
  },
  props:['styles']
};
</script>


<style lang='less' scoped>
@import url("../../../assets/css/base.less");
.list-nav {
  padding: 0 15px;
  background-color: #fff;
  > li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    > div {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      > span {
        margin-left: 10px;
      }
    }
    > div:nth-of-type(2) {
      > span {
        color: #999;
        font-size: 10px;
        margin-right: 10px;
      }
    }
  }
}
</style>
